<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{
  title: string,
  authorName: string,
  date: string,
  url: string,
  pageViews: number
}>();
const toDetail = () => {
  window.open(props.url, '_blank');
};
</script>

<template>
  <div class="article-card" @click="toDetail">
    <div class="article-icon"></div>
    <div class="article-desc">
      <div class="headline">
        <jm-text-viewer :value="props.title"></jm-text-viewer>
      </div>
      <div class="creator">
        <div class="name">{{ props.authorName }}</div>
        <div class="divider-line"></div>
        <div class="update">{{ props.date }}</div>
        <div class="divider-line" v-if="props.pageViews"></div>
        <div v-if="props.pageViews">阅读・{{ props.pageViews }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.article-card {
  flex-shrink: 0;
  display: flex;
  cursor: pointer;
  border: 1px solid #DFE7EE;

  &:hover {
    box-shadow: 0 0 10px 0 #E5E9F0;
    border: 1px solid transparent;
  }

  .article-icon {
    background-image: url("@/assets/web/svgs/article.svg");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .article-desc {
    flex: 1;

    .headline {
      cursor: pointer;
      color: #042749;

      &:hover {
        .jm-text-viewer {
          color: #096DD9;
        }
      }
    }

    .creator {
      color: #7B8C9C;
      display: flex;
      align-items: center;

      .divider-line {
        background-color: #7B8C9C;
      }
    }
  }
}
</style>
